<template>
  <div>
    <div class="div-content" style="">

    </div>
    <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"></Table>
    <Row type="flex" justify="end">
      <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
    </Row>
  </div>
</template>

<script>
import {
  PlantWithdrawalSaleDetail
} from "@/api/financial.js"
export default {
  data () {
    return {
      loading: false,
      total: 0,
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
      },
      columns: [{
        title: '序号',
        type: "index",
        width: '80',
        align: 'center'
      }, {
        title: "商家名称",
        key: "storeName",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "区域",
        key: "region",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "商品ID",
        key: "goodsId",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "商品名称",
        key: "goodsName",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "商品单价",
        key: "goodsPrice",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "商品数量",
        key: "num",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "焕贝总额",
        key: "flowPrice",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "提现折扣",
        key: "applyFee",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "可提现现金额（元）",
        key: "deposit",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "本次提现现金额（元）",
        key: "realMoney",
        minWidth: 200,
        tooltip: true,
      }],
      data: [],
    }
  },
  created () {
    this.sn = this.$route.query.sn
    this.getDataList()
  },
  methods: {
    getDataList () {
      PlantWithdrawalSaleDetail({
        ...this.searchForm,
        sn: this.sn
      }).then((res) => {
        this.loading = false
        this.data = res.result.records
        this.total = res.result.total
      })
    },
    // 分页 改变页码
    changePage (v) {
      this.searchForm.pageNumber = v
      this.getDataList()
    },
    // 分页 改变页数
    changePageSize (v) {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = v
      this.getDataList()
    },
  }
}
</script>

<style lang="scss" scoped>
.div-content {
  width: 100%;
  height: 100%;
  display: flex;

  .div-item {
    line-height: 35px;
    display: flex;
    float: left;
    margin-right: 36px;
    font-size: 16px;
    font-weight: 600;

    // >.div-item-left {}

    > .div-item-right {
      flex: 1;
      word-break: break-all;
    }
  }
}
</style>
